<%--
  Created by IntelliJ IDEA.
  author: Jsonor
  date: 2018/9/29 10:38
  description: Description
--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html>
<head>
    <%--<script src="${pageContext.request.contextPath}/static/js/vue.min.js"/>--%>
    <%--<script src="${pageContext.request.contextPath}/static/js/index.js"></script>--%>
    <title>淘有货个人中心</title>
    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/plugins.css?v=1." rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=1." rel="stylesheet">
    <%--<link type="text/css" href="${pageContext.request.contextPath}/static/css/registry.css"/>--%>
    <!-- Modernizer JS -->
    <script src="${pageContext.request.contextPath}/static/js/vendor/modernizr-2.8.3.min.js"></script>


    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>
<style>
    .container[data-v-x9h34y4f] {
        position: relative;
        z-index: 3;
        width: 930px;
        min-height: 800px;
        margin: 0 auto;
        padding: 0;
    }

    @media screen and (max-width: 1006px) {
        .container[data-v-x9h34y4f] {
            width: 930px;
        }
    }

    #Modal1, #Modal2, #Modal3, #Modal4, #Modal5 {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .pop_box {
        width: 25%;
        z-index: 1;
        margin: 12% auto;
        overflow: auto;
        background-color: white;
        border-radius: 5px;
        box-shadow: 10px 10px 5px #888888;
    }

    .middle-sm {
        width: 50%;
        margin: auto;
        height: 60px;
        padding: 0 20px;
    }

    .middle-md {
        margin: auto;
        height: 100px;
        padding: 0 20px;
    }

    .middle-lg {
        margin: auto;
        height: 200px;
        padding: 0 30px;
    }

    .head {
        padding: 5px;
    }



    .interval {
        height: 10px;
    }

    .foot {
        padding: 5px 0;
        text-align: center;
        color: black;
        margin-bottom: 6px;
    }

    h2 {
        margin: 10px 0;
        color: black;
        padding-left: 15px;
    }

    h5 {
        margin: 0 0px;
        padding-top: 15px;
    }

    #sex {
        width: 50%;
        height: 50%;
    }
</style>
<body>
<jsp:include page="../small/head1.jsp"/>
<jsp:include page="../small/head3.jsp"/>
<div id="user-set-app" class="container" v-cloak data-v-x9h34y4f>
    <div style="margin-top: 20px;">
        <div style="width: 25%;height: 700px;background-color: #3B4348;float: left">
            <img style="width: 150px;height: 150px;border-radius: 50%;margin:75% 20px 20px 30px"
                 src="${pageContext.request.contextPath}/${UserDetail.img}"/>
            <center>
                <div class="" style="width: 60%">
                    <button type="button" @click="changeFile()" class="btn btn-primary">上传头像</button>
                    <input id="headpng" type="file" accept="image/jpg,image/png,image/jpeg,image/bmp"
                           @change="openFile(event);" hidden>
                </div>
            </center>
        </div>
        <div style="width: 75%;height: 700px;background-color: #3B4348;float: right">
            <table class="table table-striped">

                <thead>
                <h1 style="margin-top: 10%;margin-bottom: 15px">
                    <center class="text-white">个人信息修改</center>
                </h1>
                <input v-model="uid" name="uid" type="text" value="${UserDetail.uid}" id="uid" hidden>
                </thead>
                <tbody>
                <tr>
                    <td class="text-white">用户名</td>
                    <td id="td_username" class="text-white" style="position: relative;left: 50px;">${UserDetail.username}</td>
                    <td style="float: right">
                        <button @click="show(1)" type="button" class="btn btn-primary">修改</button>
                    </td>
                    <!-- 模态框（Modal） -->
                    <!-- Modal -->
                    <div id="Modal1" style="z-index: 99" class=" back">
                        <div class="pop_box content">
                            <div class="head">
                                <span style="float: right;" @click="close(1)">×</span>
                                <h5 >用户名修改</h5>
                            </div>
                            <hr>
                            <div class="middle-md">
                                <label style="font-weight: 600;" for="username">用户名</label>
                                <input style="width: 60%" type="text" onkeyup="this.value=this.value.replace(/\s+/g,'')"
                                       class="form-control" id="username" name="username" v-model="username"
                                       value="" placeholder="${UserDetail.username}">
                                <span ref="usernameMsg" class="input-tips tips-hidden"></span>
                            </div>

                            <hr>
                            <div class="foot">
                                <input @click="modifyusername($('#username').val(),1)" type="button" value="修改"
                                       class="btn btn-primary "
                                       style="position: relative; left: 55px;">
                                <input type="button" value="关闭" class=" btn btn-default " @click="close(1)"
                                       style="position:relative;left:75px;">
                            </div>
                        </div>
                    </div>


                </tr>
                <tr>
                    <td class="text-white">手机号码</td>
                    <td id="td_phone"  class="text-white" class="text-white" style="position: relative;left: 50px;">${sessionScope.user.phone}</td>
                    <td style="float: right">
                        <button @click="show(2)" type="button" class="btn btn-primary">修改</button>
                    </td>
                    <!-- Modal -->
                    <div id="Modal2" style="z-index: 99" class=" back">
                        <div class="pop_box content">
                            <div class="head">
                                <span style="float: right;" @click="close(2)">×</span>
                                <h5>修改绑定号码</h5>
                            </div>
                            <hr>
                            <div class="middle-lg">
                                <div style="width: 80%">
                                    <label style="font-weight: 600;" for="phone">手机号码</label>
                                    <input type="text" v-model="phone" class="form-control" id="phone" name="phone"
                                           value="" placeholder="${UserDetail.phone}">
                                </div>
                                <span style="color: red;font-size: 10px;" ref="phoneMsg"
                                      class="input-tips tips-hidden"></span>
                                <div class="interval"></div>
                                <div style="display:inline-block;width:50%;">
                                    <label style="font-weight: 600;" for="code">验证码</label>
                                    <input style="" v-model="phoneCode" type="text" class="form-control" id="code"
                                           name="code">
                                    <br>
                                </div>
                                <div style="float:right;margin-top: 6%;">
                                    <input  style="padding: 13px;" @click="getPhoneCode()" type="button" class="btn btn-sm" id="phonetime" value="获取验证码">
                                </div>
                                <br>
                                <span style="color: red;font-size: 10px;" ref="phoneCodeMsg"
                                      class="input-tips tips-hidden"></span>
                            </div>
                            <hr>
                            <div class="foot">
                                <span style="color: red;font-size: 10px;" ref="updateMsg"
                                      class="input-tips tips-hidden"></span>
                                <input type="button" value="修改" class="btn btn-primary " @click="modifyphone(2)"
                                       style="position: relative; left: 55px;">
                                <input type="button" value="关闭" class=" btn btn-default " @click="close(2)"
                                       style="position:relative;left:75px;">
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <td  class="text-white" class="text-white">性别</td>
                    <td  class="text-white" id="td_sex" class="text-white" style="position: relative;left: 50px;">${UserDetail.sex}</td>
                    <td style="float: right">
                        <button @click="show(4)" type="button" class="btn btn-primary">修改</button>
                    </td>
                    <div id="Modal4" style="z-index: 99" class=" back">
                        <div class="pop_box content">
                            <div class="head">
                                <span style="float: right;" @click="close(4)">×</span>
                                <h5></h5>
                            </div>
                            <hr>
                            <div class="middle-sm">
                                <label style="font-weight: 500;size: 18px;" for="username">性别</label>
                                <select name="sex" id="sex">
                                    <option value="男">
                                        男
                                    </option>
                                    <option value="女">
                                        女
                                    </option>
                                </select>
                            </div>
                            <hr>
                            <div class="foot">
                                <input @click="modifysex($('#sex').val(),4)" type="button" value="修改"
                                       class="btn btn-primary "
                                       style="position: relative; left: 55px;">
                                <input type="button" value="关闭" class=" btn btn-default " @click="close(4)"
                                       style="position:relative;left:75px;">
                            </div>
                        </div>
                    </div>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td style="float: right">
                        <input @click="gotoResetPassword('${UserDetail.uid}')" type="button" value="密码修改" class="btn btn-primary"></input>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>


</div>


<jsp:include page="../foot.jsp"/>
</body>

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>
<%--购物车飞入--%>
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery.fly.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="${pageContext.request.contextPath}/static/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/plugins.js"></script>

<script src="${pageContext.request.contextPath}/static/js/vendor/vue.min.js"/>
<!--=== product And store Js ===-->
<script src="${pageContext.request.contextPath}/static/js/product.js"></script>
<script src="${pageContext.request.contextPath}/static/js/api/store.js"></script>
<!--=== Active Js ===-->
<script src="${pageContext.request.contextPath}/static/js/active.js"></script>

<script>
    var userSetApp = new Vue({
            el: "#user-set-app",
            data: {
                user: {},
                uid: $("#uid").val(),
                username: '',
                phone: '',
                phoneCode: '',
                address: '',
                mail: '',
                phoneTime: 60,
                mailTime: 60
            },
            methods: {
                getUser: function () {
                    var user = JSON.parse(window.localStorage.getItem("user"));
                    if (user && user !== "" && user !== null) {
                        this.user = user;
                    }
                },
                changeFile:function () {
                    $("#headpng").click();
                }
                ,
                openFile: function (event) {
                    var input = event.target;
                    var reader = new FileReader();
                    var _this = this;
                    reader.onload = function () {
                        var database64 = _this.getBase64Image(reader.result);
                        console.log("this is getBase out");
                        $.ajax({
                            url:  Store.context + '/user/uploading.do',
                            type: "POST",
                            data: {"imgdatabase": database64},
                            success: function (data) {
                                console.log(data.sueccess);
                                if (data.success) {
                                    window.location.reload();
                                } else {
                                    alert(data.msg);
                                }
                            }
                        });

                    };
                    reader.readAsDataURL(input.files[0]);
                },
                getBase64Image: function (imgElem) {
                    // return imgElem.replace("/^data:image\/(jpeg|jpg);base64,/", "");
                    return imgElem.split(",")[1];
                },
                getPhoneCode: function () {
                    var _this = this;
                    var _thismsg = _this.$refs.phoneMsg;
                    var phone = $("#phone").val();
                    var phoneExp = /^1[34578][0-9]{9}$/;//号码规范
                    if (!phone || phone === '') {
                        _thismsg.className = 'input-tips tips-show';
                        _thismsg.innerText = '手机号为空';
                    } else if (!phoneExp.test(phone)) {
                        _thismsg.className = 'input-tips tips-show';
                        _thismsg.innerText = '请输入正确的手机号码';
                    } else {


                        $.ajax({
                            url: "/client/user/sendPhoneCode.do",
                            type: 'post',
                            data: {
                                phone: phone,
                            },
                            success: function (d) {
                                if (d.status == 0) {
                                    console.log("没有问题");
                                    _this.time();
                                    _thismsg.className = 'input-tips tips-hidden';
                                    _thismsg.innerText = '';
                                } else {
                                    _thismsg.className = 'input-tips tips-show';
                                    _thismsg.innerText = '您输入的手机号已注册！';
                                    return;
                                }
                            }
                        })
                    }
                },
//                getMailCode: function () {
////                    先不做发送邮件功能
//
//                    var _this = this;
//                    _this.checkMail();
//                    $.ajax({
//                        url: Store.local + Store.context + "/user/updateMail.do",
//                        type: 'post',
//                        data: {
//                            email: _this.mail,
//                            uid: _this.mail,
//                        },
//                        success: function (data) {
//                            if (data.success) {
//                                $("#td_mail").html(_this.mail);
//                            }
//                        }
//                    })
//                },
                time: function () {
                    var _this = this;
                    var t = $("#phonetime");
                    if (_this.phoneTime == 0) {
                        _this.phoneTime = 60;
                        t.removeAttr("disabled");
                        t.val("获取验证码");
                    } else {
                        t.attr('disabled', true);
                        t.val(_this.phoneTime + "秒后可重新发送");
                        _this.phoneTime--;
                        setTimeout(function () {
                            _this.time();
                        }, 1000);
                    }
                },
//                time2: function () {
//                    var _this = this;
//                    var t = $("#mailtime");
//                    if (_this.mailTime == 0) {
//                        _this.mailTime = 60;
//                        t.removeAttr("disabled");
//                        t.val("获取验证码");
//                    } else {
//                        t.attr('disabled', true);
//                        t.val(_this.mailTime + "秒后可重新发送");
//                        _this.mailTime--;
//                        setTimeout(function () {
//                            _this.time2();
//                        }, 1000);
//                    }
//                },
                show: function (index) {
                    var id = "#Modal" + index;
                    $(id)[0].style.display = "block";
//                    console.log($(id)[0]);
                },
                close: function (index) {
                    var id = "#Modal" + index;
                    $(id)[0].style.display = "none"
                },
                modifyusername: function (username, index) {
                    var _this = this;
                    if (_this.username == '') {
                        _this.$refs.usernameMsg.className = 'input-tips tips-show';
                        _this.$refs.usernameMsg.innerText = '用户名不能为空';
                    }

                    if (_this.username != '') {
                        _this.$refs.usernameMsg.className = 'input-tips tips-hidden';
                        _this.$refs.usernameMsg.innerText = '';
                        $.ajax({
                            url: Store.local + Store.context + "/user/updateUsername.do",
                            data: {
                                username: username,
                                uid: _this.uid
                            },
                            type: "post",
                            success: function (e) {
                                if (e.success) {
                                    $('#td_username').html(username);
                                }
                                _this.close(index);
                                if(e.other == -1){
                                    window.location.href = "${pageContext.request.contextPath}/user/goto404.do";
                                }
                            }
                        })
                    }
                },
                modifyphone: function (index) {
                    var _this = this;
                    if (_this.checkInput()) {
                        $.ajax({
                            url: Store.context + "/user/updatePhone.do",
                            type: 'post',
                            data: {
                                phone: _this.phone,
                                phoneCode: _this.phoneCode,
                            },
                            success: function (data) {
                                if (!data.success) {
                                    _this.$refs.updateMsg.className = 'input-tips tips-show';
                                    _this.$refs.updateMsg.innerText = '验证码错误';
                                } else {
                                    _this.$refs.updateMsg.className = 'input-tips tips-hidden';
                                    _this.$refs.updateMsg.innerText = '';
                                    $("#td_phone").html(_this.phone)
                                    _this.close(index);
                                }

                            }
                        })
                    }
                },
                modifysex: function (sex, index) {
                    var _this = this;
                    console.log(sex);
                    $.ajax({
                        url: Store.local + Store.context + "/user/updateSex.do",
                        data: {
                            sex: sex,
                        },
                        type: "post",
                        success: function (d) {
                            if (d.success) {
                                $('#td_sex').html(sex);
                            }
                            _this.close(index);
                            if(e.other == -1){
                                window.location.href = "${pageContext.request.contextPath}/user/goto404.do";
                            }
                        }
                    })
                },
                gotoResetPassword:function (uid) {
                    var from1 = document.createElement("form");
                    from1.method = 'post';
                    from1.action = "/client/user/gotoResetPassword.do";
                    var input2 = document.createElement("input");
                    input2.type = 'hidden';
                    input2.name = "page";
                    input2.value = 1;
                    from1.appendChild(input2);
                    document.body.appendChild(from1);
                    from1.submit();
                },
                checkInput: function () {
                    var flag = true;
                    var phoneExp = /^1[34578][0-9]{9}$/;
                    if (!this.phone || this.phone === '') {
                        this.$refs.phoneMsg.className = 'input-tips tips-show';
                        this.$refs.phoneMsg.innerText = '手机号为空';
                        flag = false;
                    } else if (!phoneExp.test(this.phone)) {
                        this.$refs.phoneMsg.className = 'input-tips tips-show';
                        this.$refs.phoneMsg.innerText = '请输入正确的手机号码';
                        flag = false;
                    } else {
                        this.$refs.phoneMsg.className = 'input-tips tips-hidden';
                        this.$refs.phoneMsg.innerText = '';
                    }

                    if (!this.phoneCode || this.phoneCode === '') {
                        this.$refs.phoneCodeMsg.className = 'input-tips tips-show';
                        this.$refs.phoneCodeMsg.innerText = '手机验证码为空';
                        flag = false;
                    } else if (this.phoneCode.length < 4) {
                        this.$refs.phoneCodeMsg.className = 'input-tips tips-show';
                        this.$refs.phoneCodeMsg.innerText = '请输入正确的验证码';
                        flag = false;
                    } else {
                        this.$refs.phoneCodeMsg.className = 'input-tips tips-hidden';
                        this.$refs.phoneCodeMsg.innerText = '';
                    }
                    return flag;
                },
                checkMail: function () {
                    var flag = true;
//                    var MailExp = /^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$/;
                    var MailExp = /^\d{5,12}@[qQ][qQ]\.(com|cn)$/;
                    if (!this.mail || this.mail === '') {
                        this.$refs.MailMsg.className = 'input-tips tips-show';
                        this.$refs.MailMsg.innerText = '邮箱不能为空';
                        flag = false;
                    } else if (!MailExp.test(this.mail)) {
                        this.$refs.MailMsg.className = 'input-tips tips-show';
                        this.$refs.MailMsg.innerText = '邮箱不规范';
                        flag = false;
                    } else {
                        this.$refs.MailMsg.className = 'input-tips tips-hidden';
                        this.$refs.MailMsg.innerText = '';
                    }
                    return flag;
                }
            }

        })
    ;

</script>
<script>

</script>
</html>
